import {Button, Icon, Menu} from 'antd';
import React from "react";
import ButtonGroup from "antd/es/button/button-group";
import Dropdown from "antd/es/dropdown/dropdown";

class AntdButton extends React.Component {
  render() {
    return (
      <div>
        <h4>按钮类型</h4>
        <div>
          <Button type="primary">主按钮，在同一个操作区域最多出现一次</Button>
          <Button>次按钮</Button>
          <Button type="dashed">虚线按钮</Button>
          <Button type="danger">危险按钮</Button>
        </div>
        <h4>按钮形状</h4>
        <div>
          <Button type="primary">主按钮</Button>
          <Button type="primary" shape="circle">主按钮</Button>
          <Button type="primary" shape="round">主按钮</Button>
        </div>
        <h4>按钮尺寸</h4>
        <div>
          <Button type="primary" size="large">大</Button>
          <Button type="primary" size="default">中</Button>
          <Button type="primary" size="small">小</Button>
          <Button type="primary">默认中</Button>
        </div>
        <h4>加载中</h4>
        <div>
          <Button>原样</Button>
          <Button loading>加载</Button>
          <Button icon="poweroff">带图标</Button>
          <Button icon="poweroff" loading={true}>带图标加载</Button>
          <Button icon="poweroff" loading={false}>状态为false</Button>
        </div>
        <h4>组合按钮</h4>
        <div>
          <ButtonGroup>
            <Button>L</Button>
            <Button>M</Button>
            <Button>R</Button>
          </ButtonGroup>
        </div>
        <h4>按钮适合其父宽度</h4>
        <div>
          <Button type="primary" block>Primary</Button>
        </div>
        <h4>图标按钮</h4>
        <div>
          <Button type="primary" shape="circle" icon="search"/>
          <Button type="primary" icon="search">Search</Button>
        </div>
        <h4>不可用状态</h4>
        <div>
          <Button type="primary">Primary</Button>
          <Button type="primary" disabled>Primary(disabled)</Button>
        </div>
        <h4>多个按钮组合</h4>
        <div>
          <Button type="primary">primary</Button>
          <Button>secondary</Button>
          <Dropdown overlay={() => (<Menu>
            <Menu.Item key="1">1st item</Menu.Item>
            <Menu.Item key="2">2nd item</Menu.Item>
            <Menu.Item key="3">3rd item</Menu.Item>
          </Menu>)}>
            <Button>
              Actions <Icon type="down"/>
            </Button>
          </Dropdown>
        </div>
        <h4>幽灵按钮</h4>
        <div style={{ background: 'rgb(190, 200, 200)', padding: '16px 16px 16px' }}>
          <Button type="primary" ghost>Primary</Button>
          <Button ghost>Default</Button>
          <Button type="dashed" ghost>Dashed</Button>
          <Button type="danger" ghost>danger</Button>
        </div>
        <h4>按钮类型</h4>
        <div>
          <Button type="primary">主按钮</Button>
          <Button size="large">次按钮</Button>
          <Button type="dashed">虚线按钮</Button>
          <Button type="danger" size="small">危险按钮</Button>
        </div>
        <h4>链接</h4>
        <div>
          <Button type="primary" href="https://www.baidu.com" target={"123"}>主按钮</Button>
        </div>

      </div>

    )
  }
}

export default AntdButton;
